import React, {Component} from 'react';
import {Table, Input, InputNumber, TimePicker, message, Tabs, Radio, Button} from 'antd';
import moment from 'moment';
import "./BottomPartOfTheForm.css"

const {TextArea} = Input;//文本输入框

class BottomPartOfTheForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Data: [[[], [], 0, [],], [[], [], 8, [],], [[], [], 16, [],]],
            BanCi: [],
            weightAverage: ''//平均立升重
        }
    }

    /**初始化**/
    componentDidMount() {
        //绑定ref
        this.props.onRef(this);
    }

    componentWillMount() {
        this.setState({
            Data: this.props.bottomData,
            timeChose: this.props.timeChose
        });
    }

    /**更新props**/
    componentWillReceiveProps(nextProps) {
        this.setState({
            Data: nextProps.bottomData,
            timeChose: nextProps.timeChose
        });
    }


    /**提交数据到后台**/
    postToHome() {
        const shuju = JSON.stringify(this.state.Data[this.state.timeChose]);
        const jsonData = {
            "data": [
                {
                    "riqi": this.props.riqi,
                    "xiaoshi": this.state.timeChose,
                    "leixing": "ZKSX2",
                    "zhonglei": 2,
                    "shuju": shuju,
                    "name": this.props.person,
                }
            ]
        };
        fetch("/api/ZhongKS/save", {
            method: 'POST',
            body: JSON.stringify(jsonData), // data can be `string` or {object}!
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {
                    message.info('提交成功');
                }
            })
            .catch(error => console.error('Error:', error))
            .then(response => console.log('Success:', response));
    }

    /**
     * TextArea输入监听
     */
    handleChangeTextArea(event, index) {
        const newData = this.state.Data;
        newData[this.state.timeChose][0][index] = event.target.value;
        this.setState({
            Data: newData
        });
    }

    /**
     * InputNumber输入监听
     */
    handleChangeInputNumber(event, index) {
        const newData = this.state.Data;
        newData[this.state.timeChose][1][index] = event;
        this.setState({
            Data: newData
        });
    }

    /**
     * TimePicker输入监听
     */
    handleChangeTimePicker(event) {
        const newData = this.state.Data;
        newData[this.state.timeChose][2] = event.format("HH");
        this.setState({
            Data: newData
        });
    }

    /**
     * Input输入监听
     */
    handleChangeInput(event, index) {
        const newData = this.state.Data;
        newData[this.state.timeChose][3][index] = event.target.value;
        this.setState({
            Data: newData
        });
    }

    render() {
        //表头
        const columns = [
            {
                title: '1',
                dataIndex: '1',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 0;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 2;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 10;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '2',
                dataIndex: '2',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 9;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 3;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '3',
                dataIndex: '3',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 2;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '4',
                dataIndex: '4',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '5',
                dataIndex: '5',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 3;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 3;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '6',
                dataIndex: '6',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '7',
                dataIndex: '7',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '8',
                dataIndex: '8',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 3;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '9',
                dataIndex: '9',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 2;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
            {
                title: '10',
                dataIndex: '10',
                width: '10%',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {//备注
                        obj.props.colSpan = 0;
                    }
                    if (index === 1) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 2) {//接班
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 0;
                    }
                    if (index === 3) {//空白
                        obj.props.rowSpan = 6;
                        obj.props.colSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 6) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 7) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 8) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 9) {//班长
                        obj.props.rowSpan = 1;
                        obj.props.colSpan = 1;
                    }
                    return obj;
                },
            },
        ];
        /**限制输入数值位数的函数**start**/
        const limitDecimals = (value: string | number): string => {
            const reg = /^(\-)*(\d+)\.(\d\d).*$/;
            if (typeof value === 'string') {
                return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
            } else if (typeof value === 'number') {
                return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
            } else {
                return ''
            }
        };
        /**限制输入数值位数的函数**end**/

            //左边班次的输入
        const Data = this.state.Data[this.state.timeChose];
        const data = [
                {
                    1: '备注',
                    2: <TextArea value={Data[0][0]}
                                 onChange={event => this.handleChangeTextArea(event, 0)}
                                 style={{
                                     resize: "none"
                                 }}/>,
                },
                {
                    2: <span>均化XX:&emsp;<InputNumber value={Data[1][0]}
                                                     formatter={limitDecimals}//限制输入数值位数
                                                     parser={limitDecimals}//限制输入数值位数
                                                     onChange={event => this.handleChangeInputNumber(event, 0)}
                                                     style={{
                                                         resize: "none"
                                                     }}/>&emsp;风机</span>,
                    5: <span>移重XX:&emsp;<InputNumber value={Data[1][1]}
                                                     formatter={limitDecimals}//限制输入数值位数
                                                     parser={limitDecimals}//限制输入数值位数
                                                     onChange={event => this.handleChangeInputNumber(event, 1)}
                                                     style={{
                                                         resize: "none"
                                                     }}/>&emsp;风机</span>,
                    8: 'XXXXXX（0点班  8点班  16点班）',
                    9: this.state.timeChose * 8 + '点班',
                },
                {
                    1: '接班:中心风  内风  外风',//长度2
                    3: <Input value={Data[3][0]}
                              onChange={event => this.handleChangeInput(event, 1)}/>,//长度2
                    5: <span>燃烧器:&emsp;<InputNumber value={Data[1][2]}
                                                    formatter={limitDecimals}//限制输入数值位数
                                                    parser={limitDecimals}//限制输入数值位数
                                                    onChange={event => this.handleChangeInputNumber(event, 2)}
                                                    style={{
                                                        resize: "none"
                                                    }}/>&emsp;位</span>,//长度3
                    8: <span>孰料仓位:&emsp;<InputNumber value={Data[1][3]}
                                                     formatter={limitDecimals}//限制输入数值位数
                                                     parser={limitDecimals}//限制输入数值位数
                                                     onChange={event => this.handleChangeInputNumber(event, 3)}
                                                     style={{
                                                         resize: "none"
                                                     }}/>&emsp;米</span>,//长度3
                },
                {
                    1: <TextArea value={Data[0][1]}
                                 placeholder='备注'
                                 onChange={event => this.handleChangeTextArea(event, 1)}
                                 style={{
                                     resize: "none"
                                 }}/>,
                }, {}, {}, {}, {}, {},
                {
                    1: '班长：',//长度4
                    2: <Input value={Data[3][2]}
                              onChange={event => this.handleChangeInput(event, 2)}/>,
                    3: '操作员：',//长度4
                    4: <Input value={Data[3][3]}
                              onChange={event => this.handleChangeInput(event, 3)}/>,
                    5: '投料时间',//长度3
                    6: <TimePicker value={moment(Data[2], 'HH')}
                                   format={"HH"} onChange={event => this.handleChangeTimePicker(event)}/>,//长度4
                    7: '投料量',
                    8: <span><InputNumber value={Data[1][4]}
                                          formatter={limitDecimals}//限制输入数值位数
                                          parser={limitDecimals}//限制输入数值位数
                                          onChange={event => this.handleChangeInputNumber(event, 4)}
                                          style={{
                                              resize: "none"
                                          }}/>/
                        <InputNumber value={Data[1][5]}
                                     formatter={limitDecimals}//限制输入数值位数
                                     parser={limitDecimals}//限制输入数值位数
                                     onChange={event => this.handleChangeInputNumber(event, 5)}
                                     style={{
                                         resize: "none"
                                     }}/></span>,//长度3
                    9: '孰料产量',//长度4
                    10: <span><InputNumber value={Data[1][6]}
                                           formatter={limitDecimals}//限制输入数值位数
                                           parser={limitDecimals}//限制输入数值位数
                                           onChange={event => this.handleChangeInputNumber(event, 6)}
                                           style={{
                                               resize: "none"
                                           }}/>/
                    <InputNumber value={Data[1][7]}
                                 formatter={limitDecimals}//限制输入数值位数
                                 parser={limitDecimals}//限制输入数值位数
                                 onChange={event => this.handleChangeInputNumber(event, 7)}
                                 style={{
                                     resize: "none"
                                 }}/></span>,
                },
            ]
        ;


        return (
            <div className="ZKSX2_bottom">
                <Table
                    className='ZKSX2_bottom_table' dataSource={data} bordered
                    columns={columns} showHeader={false} pagination={false}/>
            </div>
        );
    }

}

export default BottomPartOfTheForm;
